<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/template/template.xhtml">
    <ui:define name="content">
        <h:form id="leaveForm">
            <p:growl id="messages" showDetail="true"/>

            <p:schedule id="schedule" value="#{scheduleBean.scheduleModel}" widgetVar="mySchedule" aspectRatio="2.7"
                        view="month" draggable="FALSE" resizable="FALSE" rightHeaderTemplate="month,basicWeek"
                        ignoreTimezone="false">
                <p:ajax event="dateSelect" listener="#{scheduleBean.onDateSelect}" update="eventDetails days"
                        oncomplete="PF('eventDialog').show()"/>
                <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}" update="eventDetails days"
                        oncomplete="PF('eventDialog').show()"/>

            </p:schedule>

            <p:dialog id="eventDialog" widgetVar="eventDialog" header="Plan your leave" showEffect="clip" hideEffect="clip"
                      modal="true" appendToBody="true" >
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="reason" value="Reason:"/>
                    <p:inputText id="reason" label="Reason" value="#{scheduleBean.leaveEvent.reason}"/>

                    <h:outputLabel for="from" value="From:"/>
                    <p:calendar id="from" value="#{scheduleBean.fromDate}" showOn="button" pattern="dd/MM/yyyy">
                        <p:ajax event="dateSelect" listener="#{scheduleBean.fromDateSelect}"
                                update="eventDetails days"/>
                    </p:calendar>


                    <h:outputLabel for="until" value="Until:"/>
                    <p:calendar id="until" value="#{scheduleBean.toDate}" showOn="button"
                                pattern="dd/MM/yyyy">
                        <p:ajax event="dateSelect" listener="#{scheduleBean.toDateSelect}" update="eventDetails days"/>
                    </p:calendar>

                    <h:outputLabel for="leaveType" value="Leave Type:"/>
                    <p:selectOneMenu id="leaveType" value="#{scheduleBean.leaveEvent.leaveTypeDTO}"
                                     converter="#{leaveTypeConverter}">
                        <f:selectItems value="#{scheduleBean.leaveTypes}" var="types" itemLabel="#{types.name}"
                                       itemValue="#{types}"/>
                    </p:selectOneMenu>

                    <p:commandButton id="removeBut" value="Delete" actionListener="#{scheduleBean.deleteEvent}"

                                     update="messages days schedule" onclick="PF('eventDialog').hide()"
                                     disabled="#{scheduleBean.leaveEvent.id eq 0}">
                        <p:confirm header="Delete?" message="Are you sure you want to delete this request?" icon="ui-icon-alert"/>
                    </p:commandButton>
                    <p:commandButton id="saveBut" value="Send Request" actionListener="#{scheduleBean.sendRequest}"
                                     update="messages days schedule" onclick="PF('eventDialog').hide()"/>
                </h:panelGrid>
            </p:dialog>

            <h:panelGrid columns="3" id="days">
                <p:outputLabel value="Total days/year: #{scheduleBean.totalPerYear}"/>
                <p:outputLabel value="Days booked: #{scheduleBean.bookedDays}"/>
                <p:outputLabel value=""/>
                <p:outputLabel value="Days available: #{scheduleBean.availableDays}"/>
                <p:outputLabel value="Days pending: #{scheduleBean.pendingDays}"/>
            </h:panelGrid>

            <p:confirmDialog id="confirmDelete" global="true" showEffect="fade" hideEffect="explode" >
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </p:confirmDialog>

        </h:form>
    </ui:define>
</ui:composition>

</html>